<template>
  <div>
    <div id="mapDiv" class="mapDiv" ref="mapDiv"></div>
  </div>
</template>

<script>

    import 'echarts-liquidfill'
    export default {
        data() {
            return {
                map: null,
            }
        },
        mounted(){
            this.drawLine();
        },
        methods: {
            drawLine(){
                let that = this;
                var data = [[118.1630194,30.10777778,"温泉水厂"
                ],
                    [118.1808528
                        ,30.12656944,
                        "云谷寺水厂",
                        "水厂"
                    ]
                    ,
                    [118.1601806
                        ,30.14153889,
                        "西海",
                        "水厂"
                    ],
                    [118.1635556,
                        30.13104167,
                        "天海",
                        "水厂"
                    ]
                    ,
                    [118.1599667
                        ,30.14177778,
                        "西海宾馆",
                        "电磁水表"
                    ]
                    ,
                    [118.1857333
                        ,30.08637778,
                        "管委会",
                        "电磁水表"
                    ]
                    ,
                    [
                        118.1544583
                        ,30.14177778,
                        "五里桥新二库",
                        "水库"
                    ],
                    [
                        118.1886028
                        ,30.12693611,
                        "云谷寺水库",
                        "水库"
                    ]
                ];
                var firstPipe =  [
                    [
                        118.18736672401428,
                        30.080291003236805
                    ],
                    [
                        118.18357944488525,
                        30.079891793954094
                    ],
                    [
                        118.18847179412842,
                        30.08380026201753
                    ],
                    [
                        118.18553209304808,
                        30.086269665782705
                    ],
                    [
                        118.1837511062622,
                        30.087105164374567
                    ],
                    [
                        118.18297863006592,
                        30.092006613930717
                    ],
                    [
                        118.18021059036255,
                        30.099358332688045
                    ],
                    [
                        118.17274332046509,
                        30.10251420583026
                    ],
                    [
                        118.16956758499146,
                        30.10138181588278
                    ],
                    [
                        118.16885948181151,
                        30.103553765506575
                    ],
                    [
                        118.16525459289551,
                        30.10381365371706
                    ],
                    [
                        118.1516933441162,
                        30.1027369695386
                    ],
                    [
                        118.15486907958984,
                        30.117215533445776
                    ],
                    [
                        118.17126274108887,
                        30.118477666667943
                    ],
                    [
                        118.17409515380858,
                        30.12051931861504
                    ],
                    [
                        118.17031860351564,
                        30.125085042046717
                    ],
                    [
                        118.16508293151857,
                        30.133399313136767
                    ],
                    [
                        118.15924644470215,
                        30.138446921803162
                    ],
                    [
                        118.16010475158691,
                        30.14111908070256
                    ],
                    [
                        118.1802749633789,
                        30.126644021211014
                    ],
                    [
                        118.1877851486206,
                        30.12096476434009
                    ]
                ];

                var seconedPipe= [
                    [
                        118.20924282073975,
                        30.105632852053745
                    ],
                    [
                        118.20722579956055,
                        30.10782327091746
                    ],
                    [
                        118.20907115936278,
                        30.109196898651945
                    ],
                    [
                        118.20516586303712,
                        30.109679520079176
                    ],
                    [
                        118.20203304290771,
                        30.109159773829123
                    ],
                    [
                        118.20327758789062,
                        30.111721353877797
                    ],
                    [
                        118.20053100585936,
                        30.111795601584422
                    ],
                    [
                        118.19890022277832,
                        30.112575199135026
                    ],
                    [
                        118.19739818572998,
                        30.111350114507683
                    ],
                    [
                        118.19503784179688,
                        30.113280543998716
                    ],
                    [
                        118.19658279418944,
                        30.11606475086341
                    ],
                    [
                        118.19323539733885,
                        30.116176117505724
                    ],
                    [
                        118.19044589996336,
                        30.117067046124014
                    ],
                    [
                        118.18937301635744,
                        30.11836630262063
                    ],
                    [
                        118.18769931793213,
                        30.120890523525425
                    ],
                    [
                        118.18636894226074,
                        30.12011099160208
                    ],
                    [
                        118.18387985229491,
                        30.117067046124014
                    ],
                    [
                        118.18190574645995,
                        30.123563157691546
                    ],
                    [
                        118.19031715393066,
                        30.124379781481366
                    ],
                    [
                        118.19272041320801,
                        30.126940966832464
                    ],
                    [
                        118.19838523864745,
                        30.12419418575852
                    ],
                    [
                        118.19804191589355,
                        30.120779162198808
                    ],
                    [
                        118.20499420166014,
                        30.12233820934418
                    ],
                    [
                        118.20302009582518,
                        30.125864534705734
                    ],
                    [
                        118.20786952972412,
                        30.124973685450225
                    ],
                    [
                        118.2110023498535,
                        30.123006364871873
                    ],
                    [
                        118.20975780487062,
                        30.121039005098933
                    ],
                    [
                        118.20563793182372,
                        30.11758675077355
                    ]
                ];

                var map, marker;
                var zoom = 14;

                function onLoad() {
                    //初始化地图对象
                    map = new T.Map("mapDiv");
                    //设置显示地图的中心点和级别
                    map.centerAndZoom(new T.LngLat(118.1630194,30.10777778), 12);
                    var level = 0.9;
                    for(var i=0;i<data.length;i++){
                        arrFunction(data[i][0],data[i][1],"main"+i,data[i][2],data[i][3]);

                    }
                    var deer = dataLoad(firstPipe);
                    var deer1 = dataLoad(seconedPipe);
                    var polyline = new T.Polyline(deer, {color:"#1482f0", weight:1, opacity:0.5});   //创建折线
                    var polyline1 = new T.Polyline(deer1, {color:"#1482f0", weight:1, opacity:0.5});
                    map.addOverLay(polyline);
                    map.addOverLay(polyline1);



                    function arrFunction(x,y,id,i,equipmentType){
                        var definedOverlay = T.Overlay.extend({
                            initialize: function (lnglat, text, text2, options) {
                                this.lnglat = lnglat;
                                this.setOptions(options);
                                this._text = text;
                                this._overText = text2;
                            },

                            onAdd: function (map) {
                                this.map = map;
                                //var div = this._div = document.getElementById(id);
                                var div1 = document.getElementById("mapDiv");
                                var div = this._div = document.createElement("div");
                                div.id=id;
                                div.setAttribute("class","main")
                                div.style.width="100px";
                                div.style.height ="100px";
                                div.style.padding="20px";
                                div.style.position = "absolute";
                                div.style.MozUserSelect = "none";
                                var that = this;
                                map.getPanes().overlayPane.appendChild(this._div);
                                this.update(this.lnglat);
                            },

                            setLnglat: function (lnglat) {
                                this.lnglat = lnglat;
                                this.update();
                            },
                            getLnglat: function () {
                                return this.lnglat;
                            },
                            setPos: function (pos) {
                                this.lnglat = this.map.layerPointToLngLat(pos);
                                this.update();
                            },
                            /**
                             * 更新位置
                             */
                            update: function () {
                                var pos = this.map.lngLatToLayerPoint(this.lnglat);
                                this._div.style.top = ( pos.y - 36) + "px";
                                this._div.style.left = (pos.x - 11) + "px";

                            }
                        });

                        var point = new T.LngLat(x,y);
                        var pdefinedOverlay = new definedOverlay(point);
                        map.addOverLay(pdefinedOverlay);
                        waterPlot(id,i,equipmentType);
                    }

                }

                function waterPlot(id,i,equipmentType){
                    var myChart = that.$echarts.init(document.getElementById(id));
                    var level = map.getZoom();
                    var radius = 4*level;
                    var option = {
                        series: [{
                            type: 'liquidFill',
                            name: i,
                            radius:radius,
                            itemStyle: {
                                shadowBlur: 0,
                                borderColor: 'SkyBlue'
                            },
                            outline: {
                                borderDistance: 0,
                                itemStyle: {
                                    borderWidth: 2,
                                    borderColor: 'Turquoise',
                                    shadowBlur: 2,
                                    // shadowColor: 'rgba(255, 0, 0, 1)'
                                }},
                            data: [{
                                name: equipmentType,
                                value: Math.random().toFixed(2)
                            }],
                            shape: 'rect',
                            color:['DeepSkyBlue'],
                            backgroundStyle: {
                                color: 'Gainsboro'
                            },
                            label: {
                                formatter: '{a}\n{b}\n{c}',
                                fontSize: 0.7*level,
                                color:"Gray"
                            }
                        }]
                    };
                    console.log("// 使用刚指定的配置项和数据显示图表。")
// 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

                function dataLoad(data){
                    var length = data.length;
                    var data1=[];
                    for(var i = 0;i<length;i++){
                        var a = data[i][0];
                        var b = data[i][1];
                        data1[i]=new T.LngLat(a,b);
                    }
                    return data1;
                }
                onLoad()

            }
        }
    }
</script>

<style scoped>
  .mapDiv{
    width: 100%;
    height: 94vh;
  }
  #main {
    padding: 20px;
    height: 100px;
    width: 100px;
    color: red;
  }
</style>
